<template>
  <div class="tabs">
    <RouterView />
    <VanTabbar v-model="active">
      <VanTabbarItem name="home">
        <span class="textSize">首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.home : icon.inactiveHome" />
        </template>
      </VanTabbarItem>
      <VanTabbarItem name="type">
        <span class="type">分类</span>
        <template #icon="props">
          <img :src="props.active ? icon.type : icon.inactiveType" />
        </template>
      </VanTabbarItem>
      <VanTabbarItem name="video">
        <span class="textSize">视频</span>
        <template #icon="props">
          <img :src="props.active ? icon.video : icon.inactiveVideo" />
        </template>
      </VanTabbarItem>
      <VanTabbarItem name="chat">
        <span class="textSize">客服</span>
        <template #icon="props">
          <img :src="props.active ? icon.chat : icon.inactiveChat" />
        </template>
      </VanTabbarItem>
      <VanTabbarItem name="me">
        <span class="textSize">我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.my : icon.inactiveMy" />
        </template>
      </VanTabbarItem>
    </VanTabbar>
  </div>
</template>

<script setup lang="ts" name="TabsView">
import { RouterView, useRoute, useRouter } from "vue-router";

import { ref, watch } from "vue";

const icon = {
  home: "https://cdn7.axureshop.com/demo/1992135/images/%E9%A6%96%E9%A1%B5/u1077.svg",
  inactiveHome:
    "https://cdn7.axureshop.com/demo/1992135/images/%E5%88%86%E7%B1%BB/u3977.svg",
  type: "https://bpic.588ku.com/element_origin_min_pic/19/06/15/33408c2a6f2525305a607afaeac2aa3d.jpg",
  inactiveType: "https://bpic.588ku.com/element_origin_min_pic/01/54/73/1857472f93db912.jpg",
  video: "https://img0.baidu.com/it/u=3504051868,2635261287&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=300",
  inactiveVideo:
    "https://file.moyublog.com/d/file/2024-03-06/87998704082bdd51446f9e632064c932.jpg",
  chat: "https://img1.baidu.com/it/u=2957597787,2192012647&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  inactiveChat:
    "https://t7.baidu.com/it/u=462836059,1351031310&fm=193",
  my: "https://img0.baidu.com/it/u=659730249,1044385425&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  inactiveMy:
    "https://t7.baidu.com/it/u=3613039428,290743410&fm=193",
};

const route = useRoute();
const router = useRouter();

let active = ref(route.name);

watch(active, (val) => {
  router.push({
    name: val,
  });
});
console.log(active.value);
</script>

<style lang="scss" scoped>
.tabs {
  width: 100%;
}

.textSize {
  font-size: 13px;
}
</style>
